<template>
  <div class="main">
    <el-container>
      <!-- 主体部分 -->
      <el-main style="line-height:35px">
        <!-- 展示部分 -->
        <el-card class="box-card" style="margin-top:20px;margin-left:-30px;width:1155px">
          <div>
            <div style="line-height:20px">
              <strong style="float:left">满额折额（满多少元减多少元）</strong>
            </div>
            <div class="clear"></div>
            <el-divider></el-divider>
            <el-form style="display:inline-block" :model="formInline">
              <div>
                <el-form-item label="合计铭牌价格超过   " label-width="200px" style="float:left;">
                  <el-input
                    v-model="formInline.border1"
                    placeholder="0 "
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
                <el-form-item label="减： " label-width="200px" style="float:left">
                  <el-input
                    v-model="formInline.border_rule1"
                    placeholder="0"
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="合计铭牌价格超过   " label-width="200px" style="float:left;">
                  <el-input
                    v-model="formInline.border2"
                    placeholder="0 "
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
                <el-form-item label="减： " label-width="200px" style="float:left">
                  <el-input
                    v-model="formInline.border_rule2"
                    placeholder="0"
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="合计铭牌价格超过   " label-width="200px" style="float:left;">
                  <el-input
                    v-model="formInline.border3"
                    placeholder="0 "
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
                <el-form-item label="减： " label-width="200px" style="float:left">
                  <el-input
                    v-model="formInline.border_rule3"
                    placeholder="0"
                    style="width:120px;float:left"
                  ></el-input>
                  <span style="margin-left:20px">元</span>
                </el-form-item>
              </div>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import store from "../../store";

export default {
  data() {
    return {
      formLabelWidth: "220px",
      formInline: {
        border1: "",
        border2: "",
        border3: "",
        border_rule1: "",
        border_rule2: "",
        border_rule3: ""
      }
    };
  },
  created() {
    this.rendering();
  },
  methods: {
    rendering() {
      // this.$axios({
      //   url: "/getBorderDiscount",
      //   method: "get"
      // }).then(res => {
      //   this.formInline.border1 = res.data[0].border;
      //   this.formInline.border2 = res.data[1].border;
      //   this.formInline.border3 = res.data[2].border;
      //   this.formInline.border_rule1 = res.data[0].border_rule;
      //   this.formInline.border_rule2 = res.data[1].border_rule;
      //   this.formInline.border_rule3 = res.data[2].border_rule;
      // });
      this.$store.dispatch("full").then(res => {
        console.log("chenggong1full");
        this.formInline.border1 = store.state.border1;
        this.formInline.border2 = store.state.border2;
        this.formInline.border3 = store.state.border3;
        this.formInline.border_rule1 = store.state.border_rule1;
        this.formInline.border_rule2 = store.state.border_rule2;
        this.formInline.border_rule3 = store.state.border_rule3;
      });
    },
    onSubmit() {
      this.$axios({
        url: "/updateBorderDiscount",
        method: "get",
        params: {
          border1: this.formInline.border1,
          border2: this.formInline.border2,
          border3: this.formInline.border3,
          border_rule1: this.formInline.border_rule1,
          border_rule2: this.formInline.border_rule2,
          border_rule3: this.formInline.border_rule3
        },
        headers: { "content-type": "application/json" }
      }).then(res => {
        console.log(res);
        this.$message({
          type: "info",
          message: res.data.msg
        });
        this.rendering();
      });
    }
  }
};
</script>

<style>
.clear {
  clear: both;
}
</style>